<template>
  <div class="fetch-patient-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="24">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input
              v-model.trim="queryForm.url"
              class="full-width"
              clearable
              placeholder="请输入api地址"
              size="medium"
            />
          </el-form-item>
          <el-form-item class="ml12 pl12">
            <el-select
              v-model="queryForm.method"
              placeholder="请选择"
              size="medium"
            >
              <el-option
                v-for="(item, index) in methods"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-s-promotion"
              type="primary"
              @click="fetchData"
            >
              发送
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="Params" name="first">
        <el-table border :data="paramsList">
          <el-table-column
            align="center"
            label="属性"
            prop="key"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <el-input v-model="row.key" placeholder="Key" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="值"
            prop="value"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <el-input v-model="row.value" placeholder="Value" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="85">
            <template #header="{ row }">
              <el-button type="primary" @click="handleAdd(row)">新增</el-button>
            </template>
            <template #default="scope">
              <el-button type="danger" @click="handleDelete(scope.$index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="Header" name="second">
        <el-table border :data="headerList">
          <el-table-column
            align="center"
            label="属性"
            prop="key"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <el-input v-model="row.key" placeholder="Key" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="值"
            prop="value"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              <el-input v-model="row.value" placeholder="Value" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="85">
            <template #header="{ row }">
              <el-button type="primary" @click="handleAdd(row)">新增</el-button>
            </template>
            <template #default="scope">
              <el-button type="danger" @click="handleDelete(scope.$index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="Data" name="third">
        <el-input
          v-model.trim="data"
          placeholder="请求数据"
          rows="8"
          type="textarea"
        />
      </el-tab-pane>
    </el-tabs>
    <div class="h12"></div>
    <fieldset class="fieldset">
      <legend>返回结果</legend>
      <json-viewer
        v-if="queryRes && queryRes.data"
        copyable
        :expand-depth="4"
        sort
        theme="my-awesome-json-theme"
        :value="queryRes"
      />
      <el-empty v-else description="暂无任何返回结果" />
    </fieldset>
  </div>
</template>

<script>
  import { queryData } from '@/utils/requestBySelf'
  export default {
    name: 'SystemFetch',
    data() {
      return {
        baseUrl: 'http://',
        methods: ['get', 'post', 'patch', 'put', 'delete'],
        headerList: [],
        paramsList: [],
        data: null,
        activeName: 'first',
        queryForm: {
          url: '',
          method: 'get',
        },
        queryRes: {},
      }
    },
    computed: {
      dataFormat() {
        return JSON.stringify(this.data)
      },
    },
    methods: {
      fetchData() {
        if (this.queryForm.url.indexOf('http://') === -1) {
          this.queryForm.url = `http://${this.queryForm.url}`
        }

        const params = {}
        this.paramsList.forEach((item) => {
          params[item.key] = item.value
        })
        const header = {}
        this.headerList.forEach((item) => {
          header[item.key] = item.value
        })
        const query = Object.assign(this.queryForm, { params }, { header })
        queryData(query)
          .then((res) => {
            this.queryRes = res
          })
          .catch((err) => {
            this.queryRes = err
          })
      },
      handleAdd() {
        const keyValue = { key: '', value: '' }
        if (this.activeName === 'first') {
          this.paramsList.push(keyValue)
        } else {
          this.headerList.push(keyValue)
        }
      },
      handleDelete(index) {
        if (this.activeName === 'first') {
          this.paramsList.splice(index, 1)
        } else {
          this.headerList.splice(index, 1)
        }
      },
    },
  }
</script>
<style lang="scss" scope>
  .full-width {
    width: 600px;
  }
  .fieldset {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 2px;
    legend {
      padding: 0 8px;
      font-weight: bold;
    }
  }
  // values are default one from jv-light template
  .my-awesome-json-theme {
    max-height: 400px;
    overflow-y: scroll;
    font-family: Consolas, Menlo, Courier, monospace;
    font-size: 14px;
    color: #525252;
    white-space: nowrap;
    background: #fff;

    .jv-code {
      padding: 10px;
    }

    .jv-ellipsis {
      display: inline-block;
      padding: 0px 4px 2px 4px;
      font-size: 0.9em;
      line-height: 0.9;
      color: #999;
      vertical-align: 2px;
      cursor: pointer;
      user-select: none;
      background-color: #eee;
      border-radius: 3px;
    }
    .jv-button {
      color: #49b3ff;
    }
    .jv-key {
      color: #111111;
    }
    .jv-item {
      &.jv-array {
        color: #111111;
      }
      &.jv-boolean {
        color: #fc1e70;
      }
      &.jv-function {
        color: #067bca;
      }
      &.jv-number {
        color: #fc1e70;
      }
      &.jv-number-float {
        color: #fc1e70;
      }
      &.jv-number-integer {
        color: #fc1e70;
      }
      &.jv-object {
        color: #111111;
      }
      &.jv-undefined {
        color: #e08331;
      }
      &.jv-string {
        color: #42b983;
        word-break: break-word;
        white-space: normal;
      }
    }
    .jv-code {
      .jv-toggle {
        &:before {
          padding: 0px 2px;
          border-radius: 2px;
        }
        &:hover {
          &:before {
            background: #eee;
          }
        }
      }
    }
  }
</style>
